<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Language" content="en" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery 3-Column Splitter</title>
<script type="text/javascript" src="../lib/jquery.js"></script>
<script type="text/javascript" src="../splitter.js"></script>

<!-- General page styles (not critical to the demos) -->
<link rel="stylesheet" type="text/css" href="main.css" />

<style type="text/css" media="all">
html, body
{
	margin: 0;			/* Remove body margin/padding */
	padding: 0;
	overflow: hidden;	/* Remove scroll bars on browser window */
}
#header { padding: 1em; }

#MySplitter {
	/* Height is set to match window size in $().ready() below */
	border: 3px solid #669;
	min-width:  600px;
	min-height: 300px;
}
.SplitterPane {
	background: #eef;
	overflow: auto;
}
.splitter-bar-vertical {
	width: 6px;
	background: #669 url(img/vgrabber.gif) no-repeat center;
}
.splitter-bar-vertical.active, .splitter-bar-vertical:hover {
	background-color: #c66;
	width: 6px;
	opacity: 0.5;
	filter: alpha(opacity=50); /* IE */
}
</style>
<script type="text/javascript">
$().ready(function() {

	// Main vertical splitter, anchored to the browser window
	$("#MySplitter").splitter({
		type: "v",
		outline: true,
		minLeft: 100, sizeLeft: 150, maxLeft: 250,
		anchorToWindow: true,
		accessKey: "L"
	});
	// Second vertical splitter, nested in the right pane of the main one.
	$("#CenterAndRight").splitter({
		type: "v",
		outline: true,
		minRight: 100, sizeRight: 150, maxRight: 250,
		accessKey: "R"
	});
});
</script>
</head>
<body>

<div id="header">
<h1>3-Column Splitter Layout</h1>
<p>Here is a 3-column layout using nested splitters. The left and right columns are a semi-fixed width; the center column grows or shrinks. Page scroll bars have been removed since all the content is inside the splitter, and the splitter is anchored to the bottom of the window using an onresize event handler.</p>
<p>
<a href="index.html">See the splitter documentation</a>
</p>
</div>


<div id="MySplitter">

  <div class="SplitterPane">
		<p>This is the left pane of the 3-column splitter. It has been limited to a range of 100 to 250 pixels wide by inline styles. It starts at 150 pixels wide.</p>
  </div> 
  
  <div id="CenterAndRight">
  
	<div class="SplitterPane">
		<p>This is the center part of the 3-column splitter. It does most of the resizing because the left and right panes were given initial sizes and limits. Try resizing the browser window or moving a splitbar to see what I mean.</p>
		<p>The splitbars are keyboard-accessible. Use <kbd>Alt-Shift-L</kbd> to select the left vertical splitbar, or <kbd>Alt-Shift-R</kbd> for the right one. (Or, press tab until the splitbar you want to move is in focus.) Then use the arrow keys to move the bar. </p>
		<p>Splitters nested one or two levels deep are a great solution for user interfaces that just need a small number of user-resizable panes. If the data is more tabular in nature, it would be better to build a plugin that accepted a table as input and created resizable columns.</p>
	</div>
	
	<div class="SplitterPane">
		<p>This is the right pane of the 3-column splitter. It has been limited to a range of 100 to 250 pixels wide by inline styles. It starts at 150 pixels wide.</p>
	</div>
	
  </div> <!-- #CenterAndRight -->
  
</div> <!-- #MySplitter -->

</body>
</html>
